<template>  
	<div class="pagination">    
        <!-- <h1>总数：{{total}}、页大小：{{pageSize}}、页码：{{pageNo}}、连续页数：{{continues}}</h1>		
        <h2>总页数：{{totalPage}}</h2>	 -->
    	<button @click="getPageNo()" :disabled="pageNo===1">上一页</button>    
        <button v-show="startEnd.start>1">1</button>    
        <span>···</span>  
        
        <button v-for="(_,index) in startEnd.end-startEnd.start+1" :key="index" 
        :class="{active:(index+startEnd.start)===pageNo}">
            {{index + startEnd.start}}
        </button>    
        
        <span>···</span>    
        <button v-show="startEnd.end<totalPage">{{totalPage}}</button>    
        <button :disabled="pageNo===totalPage">下一页</button>   
        <span>共 {{total}} 条</span>  
    </div>
</template>

<script>    
    export default {      
        name: "Pagination",   
        props:['total','pageNo','pageSize','continues','getPageNo'] ,
        computed:{
            totalPage(){
            return Math.ceil(this.total/this.pageSize)
            },
            //连续页的起始和结束
            startEnd(){
                let start=0
                let end=0
                const{total,pageNo,pageSize,continues,totalPage}=this
 
                if(continues>totalPage){
                    start=1
                    end=totalPage
                }else{
                    start=pageNo-(continues-1)/2
                    end=pageNo+(continues-1)/2
                    if(start<1){
                        start=1
                        end=continues
                    }
                    if(end>totalPage){
                        start=totalPage-continues+1
                        end=totalPage
                    }
                }
                 return{start,end}
            }
        },
        methods:{
            
        }
    };
</script>

<style lang="less" scoped>   
    .pagination {     
        text-align: center;     
        button {        
            margin: 0 5px;        
            background-color: #f4f4f5;        
            color: gray;        
            outline: none;        
            border-radius: 2px;        
            padding: 0 4px;        
            vertical-align: top;        
            display: inline-block;        
            font-size: 13px;        
            min-width: 35.5px;        
            height: 28px;        
            line-height: 28px;        
            cursor: pointer;        
            box-sizing: border-box;        
            text-align: center;        
            border: 0;        
            &[disabled] {          
                color: #c0c4cc;          
                cursor: not-allowed;        
            }       
            &.active {          
                cursor: not-allowed;          
                background-color: #c81623;          
                color: #fff;        
            }      
        }      
        span {        
            display: inline-block;        
            line-height: 28px;        
            font-size: 14px;        
            color: gray;        
            vertical-align: middle;      
        }    
    }
</style>